<template>
    <div class="register">
        <div class="lTitle">
            <img src="../../static/images/logo02.png" alt="" />
            <h2>register</h2>
        </div>

        <van-form @submit="sendRegister">
            <van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="aPassword" type="Password" name="password" label="密码" placeholder="再次填写密码" :rules="[{ required: true, message: '请再次填写密码' }]" />
            <div style="margin: 16px">
                <van-button round block type="info" native-type="submit">注册</van-button>
            </div>
        </van-form>
        <router-link class="goLogin" replace to="/login">去登录</router-link>
    </div>
</template>

<script>
export default {
    name: "register",
    data() {
        return {
            username: "",
            password: "",
            aPassword: "",
        };
    },
    methods: {
        sendRegister(values) {
            if (this.password != this.aPassword) {
                alert("密码不一致!");
                return;
            }
            if (localStorage.getItem("token")) {
                let ssToken = JSON.parse(localStorage.getItem("token"));
                let iIndex = ssToken.find((item) => {
                    return item.username == this.username;
                });
                if (iIndex == undefined) {
                    ssToken.push(values);
                    localStorage.setItem("token", JSON.stringify(ssToken));

                    alert("注册成功!");
                    if (confirm("是否前往登录页面?")) {
                        this.$router.replace("/login");
                    } else {
                        return;
                    }
                } else {
                    alert("该用户名已被注册,请重新注册!");
                }
            } else {
                alert("注册成功!");
                localStorage.setItem("token", JSON.stringify([values]));
                if (confirm("是否前往登录页面?")) {
                    this.$router.replace("/login");
                } else {
                    return;
                }
            }
        },
    },
};
</script>

<style lang="scss" scope>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";
.register {
    overflow: hidden;
    .lTitle {
        font-size: 1.28rem;
        text-align: center;
        padding-bottom: 1.3333rem;
        margin-top: 3.2rem;
        font-weight: 800;
        color: #527de482;
        display: flex;
        justify-content: center;
        img {
            width: 1.3333rem;
        }
    }
    .goLogin {
        display: block;
        font-size: 0.32rem;
        text-align: center;
    }
    .van-button--info {
        color: white;
        background-color: #527de482;
        border: 1px solid #527de482;
        width: 100%;
        margin: 0 auto;
    }
    .van-form {
        margin: 0 0.2667rem;
    }
}
</style>
